<div class="layui-card layui-hide" id="test">

    <div class="layui-card-body">

        <fieldset ng-repeat="x in specs track by $index" class="margin-bottom-10">
            <span class="goods-spec-tags" ng-bind="$index+1"></span>
            <legend class="goods-spec-box">
                <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-button layui-bg-gray" data-tips-text="已经到最顶了" ng-if="$index<1">
                    <i class="layui-icon layui-icon-up margin-right-0"></i>
                </a>
                <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-button" ng-if="$index>0" ng-click="upSpecRow(specs,$index)">
                    <i class="layui-icon layui-icon-up margin-right-0"></i>
                </a>
                <input class="padding-left-10" ng-model="x.name" required placeholder="请输入分组">
                <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-button layui-bg-gray" data-tips-text="已经到最底了" ng-if="$index>=specs.length-1">
                    <i class="layui-icon layui-icon-down margin-right-0"></i>
                </a>
                <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-button" ng-if="$index<specs.length-1" ng-click="dnSpecRow(specs,$index)">
                    <i class="layui-icon layui-icon-down margin-right-0"></i>
                </a>
                <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-button" ng-click="delSpecRow(specs,$index)">
                    <i class="layui-icon layui-icon-close margin-right-0"></i>
                </a>
            </legend>

            <div>
                <label ng-if="x.list && x.list.length > 0" ng-repeat="xx in x.list" class="goods-spec-box inline-block">
                    <input class="padding-left-10" ng-model="xx.name" required placeholder="请输入规格">
                    <a ng-click="x.list=delSpecVal(x.list,$index)" class="layui-icon layui-icon-close goods-spec-close"></a>
                </label>
                <a style="margin-top:-10px" class="layui-btn layui-btn-sm layui-btn-primary goods-spec-button" ng-if="x.list.length<5" ng-click="addSpecVal(x.list)">
                    <i class="layui-icon layui-icon-add-1 margin-right-0"></i>
                </a>

            </div>

        </fieldset>

        <a ng-if="specs.length<5" class="layui-btn layui-btn-sm layui-btn-primary" ng-click="addSpecRow(specs)">增加分组</a>

    </div>

</div>

<style>

    .goods-spec-tags {
        left: -4px;
        width: 20px;
        height: 20px;
        font-size: 10px;
        margin-top: -5px;
        line-height: 20px;
        position: absolute;
        text-align: center;
        background: #e6e6e6;
        display: inline-block;
    }

    .goods-spec-box {
        position: relative;
        margin: 0 10px 10px 0;
        vertical-align: middle;
    }

    .goods-spec-close {
        top: 8px;
        right: 8px;
        z-index: 2;
        width: 12px;
        height: 12px;
        font-size: 10px;
        line-height: 12px;
        border-radius: 50%;
        position: absolute;
        display: inline-block;
    }

    .goods-spec-button {
        height: 28px;
        margin-top: -3px;
        line-height: 26px !important;
        /*margin-left: 5px !important;*/
    }

    .goods-spec-box input {
        z-index: 1;
        /*color: #fff;*/
        width: 127px;
        height: 16px;
        position: relative;
        text-align: center;
        /*background: #6c99a8;*/
        border: 1px solid #ccc;
        padding: 5px 0 5px 45px;
        display: inline-block !important;
    }

</style>

<script>

    $('[data-show-box]').on('click', function () {
        layer.open({
            title: '商品规格配置',
            area: ['860px', '600px'],
            content: document.getElementById('test').innerHTML,
            success: function ($dom, index) {
                let app = angular.module($dom.attr('id'), []).run(function ($rootScope) {
                    // 生成交叉表格数据
                    $rootScope.specsTreeData = [];
                    $rootScope.specsTreeNava = [];
                    // 当前商品规格发生变化时重新计算规格列表
                    $rootScope.$watch('specs', function () {
                        let list = [], title = [], table = [[]];
                        let data = angular.fromJson(angular.toJson($rootScope.specs));
                        // 过滤无效记录
                        for (let o of data) {
                            let tmp = [];
                            for (let x of o.list) (x.check && x.name.length > 0) && tmp.push(x);
                            if (tmp.length > 0) {
                                for (let x of tmp) (x.group = o.name, x.rowspan = 1, x.show = true)
                                list.push(tmp), title.push(o.name);
                            }
                            $rootScope.specsTreeNava = title;
                        }
                        // 表格交叉
                        for (let i in list) {
                            let tmp = [];
                            for (let j in table) for (let k in list[i]) tmp.push(table[j].concat(list[i][k]));
                            table = tmp;
                        }
                        // 表格合并
                        list = angular.fromJson(angular.toJson(table));
                        for (let row in list) {
                            let key = [];
                            for (let td in list[row]) key.push(list[row][td].group + '::' + list[row][td].name);
                            for (let td in list[row]) {
                                list[row][0].key = key.join(';;');
                                // list[row][0].price = $rootScope.getValue(list[row][0].key, 'price');
                                // list[row][0].package = $rootScope.getValue(list[row][0].key, 'package');
                                // for (let dow = 1 + parseInt(row); dow < list.length; dow++)
                                //    if (list[row][td].name === list[dow][td].name) (list[row][td].rowspan++, list[dow][td].show = false);
                                //    else break;
                            }
                        }
                        $rootScope.specsTreeData = list;
                    }, true);
                    // 增加整行规格分组
                    $rootScope.addSpecRow = function (data) {
                        data.push({name: '', list: [{name: ''}, {name: ''}, {name: ''}, {name: ''}, {name: ''}]})
                    };
                    $rootScope.dnSpecRow = function (data, $index) {
                        let tmp = [], cur = data[$index];
                        if ($index > data.length - 2) return false;
                        for (let i in data) {
                            (parseInt(i) !== parseInt($index)) && tmp.push(data[i]);
                            (parseInt(i) === parseInt($index) + 1) && tmp.push(cur);
                        }
                        return $rootScope.specs = tmp;
                    };
                    $rootScope.upSpecRow = function (data, $index) {
                        let tmp = [], cur = data[$index];
                        if ($index < 1) return false;
                        for (let i in data) {
                            (parseInt(i) === parseInt($index) - 1) && tmp.push(cur);
                            (parseInt(i) !== parseInt($index)) && tmp.push(data[i]);
                        }
                        return $rootScope.specs = tmp;
                    };
                    // 移除整行规格分组
                    $rootScope.delSpecRow = function (data, $index) {
                        let temp = [];
                        for (let i in data) if (parseInt(i) !== parseInt($index)) temp.push(data[i]);
                        return $rootScope.specs = temp;
                    };
                    // 增加分组的属性
                    $rootScope.addSpecVal = function (list) {
                        list.push({name: '', check: true});
                    };
                    // 移除分组的属性
                    $rootScope.delSpecVal = function (data, $index) {
                        let temp = [];
                        for (let i in data) if (parseInt(i) !== parseInt($index)) temp.push(data[i]);
                        return data = temp;
                    };

                    $rootScope.specs = [
                        {
                            name: '颜色',
                            list: [
                                {name: '红色', check: true},
                                {name: '蓝色', check: true},
                                {name: '黑色', check: true},
                            ]
                        },
                        {
                            name: '尺寸',
                            list: [
                                {name: '小', check: true},
                                {name: '中', check: true},
                            ]
                        },
                        {
                            name: '套餐',
                            list: [
                                {name: '一', check: true},
                                {name: '二', check: true},
                            ]
                        }
                    ];
                });
                angular.bootstrap(document.getElementById(app.name), [app.name]);
            }
        })
    });

</script>